import { FC, useEffect, useState } from "react";
import { List, AutoSizer, WindowScroller } from "react-virtualized";
import Canvas from "@antv/f-react";
import { Chart, Axis, Line, PointGuide } from "@antv/f2";

type IProps = object;

console.log({ List, AutoSizer, WindowScroller });

const TestReactVirtualized: FC<IProps> = () => {
  const [lineWidth, setLineWidth] = useState(1);
  const data = [
    { year: "1991", value: 3 },
    { year: "1992", value: 4 },
    { year: "1993", value: 3.5 },
    { year: "1994", value: 5 },
    { year: "1995", value: 4.9 },
    { year: "1996", value: 6 },
    { year: "1997", value: 7 },
    { year: "1998", value: 9 },
    { year: "1999", value: 13 },
  ];
  useEffect(() => {
    setLineWidth(2);
  }, []);
  return (
    <div>
      {/* 使用 Canvas 组件包裹图表 */}
      <Canvas width={600} height={100} pixelRatio={3}>
        {/* 使用 Chart 组件定义图表 */}
        <Chart
          data={data} // 设置图表数据
          width={window.innerWidth - 50} // 设置图表宽度
          height={400} // 设置图表高度
          pixelRatio={window.devicePixelRatio} // 设置像素比
        >
          {/* 添加 X 轴 */}
          <Axis field="year" type="timeCat" nice tickCount={24} />
          {/* 添加折线 */}
          <Line
            x="year" // X 轴字段
            y="value" // Y 轴字段
            animation={{ appear: { duration: 10 } }} // 动画配置
            color={"#f00"} // 折线颜色
          />
          {/* 添加点辅助线 */}
          <PointGuide
            records={[{ year: "1999", value: 13 }]} // 指定记录
            offsetX={0} // X 偏移量
            size={20} // 大小
            style={{
              fill: "#fff", // 填充颜色
              lineWidth: lineWidth, // 线宽
              stroke: "#f00", // 描边颜色
            }}
          />
        </Chart>
      </Canvas>
    </div>
  );
};

export default TestReactVirtualized;
